<template>
	<view class=" ">
		<view class="page bg-white b_y">
			<view>
				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">店铺名称</text>
					</view>
					<input class="f28 in" type="text" placeholder="请输入店铺名称" v-model="shop_name" />
				</view>

				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">联系电话</text>
					</view>
					<input class="f28 in" type="text" placeholder="请输入联系电话" v-model="shop_tel" />
				</view>

				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f28 c_pl" style="width: 180rpx;">
						<text class="f28 c_z">主营项目</text>
					</view>
					<input class="f28 in" type="text" placeholder="如男装,男袜逗号分开" v-model="shop_tag" />
				</view>

				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="f-d " style="width: 530rpx;">
						<view class=" c_pl" style="width: 180rpx;">
							<text class="f28 c_z">商家地址</text>
						</view>
						<textarea class="f28 in" style="width: 65%;" type="text" auto-height="" placeholder="请在地图上选择位置"
							v-model="shop_addr" />
					</view>
					<view class="">
						<text @click="on_dingwen()" class="bb cff  q_y f28 pr2 pl2"
							style="background-color:#0071FE;padding-top:5rpx;padding-bottom: 8rpx;">选择位置</text>
					</view>
				</view>

				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view class="  c_pl" style="width: 180rpx;">
						<text class="f28 c_z">营业时间</text>
					</view>
					<lb-picker @confirm="time" :list="cata_time" :level="2" mode="unlinkedSelector" :value="cata_time"
						:lei="1">
						<text class="f28 c_pl">{{business_time}}</text>
					</lb-picker>
				</view>

				<view class="f-d    bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx;">
					<view style="width: 180rpx;">
						<text class="f28 c_z">选择分类</text>
					</view>
					<view class="uni-list-cell-db">
						<lb-picker @confirm="on_navcate" :list="nav_list" :level="2" mode="multiSelector"
							:value="nav_list" :lei="2">
							<text class="f28 c_pl">{{cata_name}}</text>
						</lb-picker>
					</view>
				</view>


				<view class="f-d  bg-white p20 a-c bb" style="padding-top: 40rpx;padding-bottom: 40rpx; ">
					<text class="f28 c_z">店铺头像</text>
				</view>
				<view class="flex">
					<view class="uni-uploader__input-box a-c j-c " style="margin-left: 20rpx;" v-if="shop_img">
						<image class="b_y" style="height: 208rpx;width:208rpx;" :src="img_url+shop_img"></image>
					</view>
					<view class="uni-uploader__input-box a-c j-c " style="margin-left: 20rpx;" v-if="shop_img1">
						<image class="b_y" style="height: 208rpx;width:208rpx;" :src="shop_img1"></image>
					</view>
					<view style="margin-left: 20rpx;" @tap="on_img(0)">
						<view class="flex a-c j-c" style="width: 200rpx;height: 200rpx;border: solid 2rpx #bfbfbf; ">
							<text class="  bicon  " style="font-size: 80rpx;color: #bfbfbf;">&#xe7dd;</text>
						</view>
					</view>
				</view>








				<view class="" style="height: 300rpx;"></view>
			</view>
			<view class="flex j-c a-c">
				<button class="js-image-a" type="default "
					style="margin: 20upx;position: fixed;bottom: 120rpx;background-color: #0071FE;width: 600rpx;color: #fff;border-radius: 45rpx;"
					@tap="on_post">
					<text class=" p20">{{is_Submit}}</text>
				</button>
			</view>

			<lclipper v-if="show" :image-url="imageUrl" @success="ok_img" @cancel="show = false" />




		</view>

		<upmapqq v-if="is_map" @close="is_map=false" :banmi_key="tx_map_key" @confirm="confirm_mapqq">
		</upmapqq>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		params
	} from '@/common/time_list.js';
	import lclipper from '@/common/l-clipper/l-clipper.vue';

	export default {
		components: {

			lclipper,


		},
		data() {
			return {
				idtushow: false,
				tx_map_key: '',
				isYasuo: true,
				imageUrl: '',
				show: false,
				url: '',
				isdingwei: true,
				is_map: false,
				img_list: [],
				nav_list: ['二手信息', '车辆信息', '房产信息', '招聘信息', '广告其他'],
				cata_time: params,
				list: [],
				cata_name: '请选择',
				shop_img: '',
				shop_tel: '',
				shop_tag: '',
				shop_addr: '',
				business_time: '请选择',
				shop_name: '',
				is_tupian: 0,
				selectLocatin: {
					location: {}
				},
				shop_img1: '',
				rendering: false,
				find_set: {},
				img_url: '',
				is_Submit:'免费入驻'
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token');
			if (!this.token) {
				this.is_log();
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token');
			if (this.token) {
				this.init();
			}
			var that = this;
			uni.$on('banmi_login', function(data) {
				that.token = uni.getStorageSync('token');
				that.init();
			})



		},
		methods: {
			 
			
			confirm_mapqq(e) {
				 
				this.shop_addr = e.poiaddress;
				this.shop_lat = e.lat;
				this.shop_lng = e.lng;
				this.is_map=false
			},
			is_log() {
				uni.showModal({
					title: '未登陆',
					content: '登陆后可入驻',
					confirmText: '去登陆',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/banmi/user_login'
							})
						}
					}
				});
			},
			on_dingwen() {
				this.token = uni.getStorageSync('token');
				let that = this;
				if (!this.token) {
					this.is_log();
					return
				}

				// #ifdef H5
				let set_find = this.get_plugin_set;
			 
				this.tx_map_key = set_find.tx_map_key
				if(!this.tx_map_key){
					uni.showModal({
						title: '提示',
						content: '请先后台设置地图key',
						success: function (res) {
						 
						}
					});
					return
				}
	 
				
				this.is_map = true;
				return
				// #endif


				uni.chooseLocation({
					success: function(res) {
						that.shop_addr = res.address;
						that.shop_lat = res.latitude;
						that.shop_lng = res.longitude;
					},
					fail(e) {
						console.log("e: " + JSON.stringify(e));
					}
				});
			},
			confirm(val) {
				this.idtushow = false;
				this.shop_lat = val.location.lat
				this.shop_lng = val.location.lng
				this.shop_addr = val.address
			},

			ok_img(url) {
				this.is_tupian = 1;
				this.shop_img1 = url.url;
				this.shop_img = '';
				this.show = false;
			},
			isPhone() {
				let mPattern = /^1[23456789]\d{9}$/;
				return mPattern.test(this.shop_tel);
			},
			on_post() {
				this.token = uni.getStorageSync('token');
				if (!this.token) {
					this.is_log();
					return
				}
				if (!this.shop_name) {
					uni.showToast({
						title: "请输入店铺名称",
						icon: 'none'
					})
					return
				}
				if (!this.shop_tel) {
					uni.showToast({
						title: "请输入联系电话",
						icon: 'none'
					})
					return
				}
				if (!this.shop_tag) {
					uni.showToast({
						title: "请输入商家标签",
						icon: 'none'
					})
					return
				}
				if (!this.shop_lng) {
					uni.showToast({
						title: "请选择商家地址",
						icon: 'none'
					})
					return
				}
				if (this.business_time == '请选择') {
					uni.showToast({
						title: "请选择营业时间",
						icon: 'none'
					})
					return
				}
				if (!this.nav_id) {
					uni.showToast({
						title: "请选择店铺分类",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'正在提交中...',
					mask:true
				})
				if (this.is_tupian == 1) {
					let that = this
					var img_list = new Array();
					var map = {
						"filepath": this.shop_img1,
						"fileType": "image/png",
						"filesize": 2000,
						"filename": "log.jpeg",
						"width": 200,
						"height": 200,
						"duration": 0
					}

					img_list.push(map);
					this.Bmupload.banmi_upload({
						files: img_list,
						onEachUpdate: res => {

						},
						onProgressUpdate: res => {

						}
					}).then(res => {
						that.shop_img1 = '';
						that.shop_img = res[0];
						that.add_shop();
					});




					return
				}



				this.add_shop();

			},
			time(picker) {
				this.business_time = picker.value.join("-");
			},
			on_navcate(picker) {
				this.cata_name = picker.item[0];
				var index = picker.index[0];
				var data = this.NavList[index];
				this.nav_id = data['id'];
			},
			init() {
				var that = this;
				let requestParams = {};
				this.Http.post('/plugin.php/banmitongcheng/api/index/shop_edit', requestParams).then(ret => {

					if (ret.status == 200) {

						this.rendering = true;

						var NavList = ret.data.NavList;
						var shop_find = ret.data.find;
			 
						this.img_url = ret.img_url;


						if (shop_find) { 
							that.title = '商家编辑';
							that.is_Submit = '确认编辑';
							uni.setNavigationBarTitle({
								title: that.title
							})


							that.shop_name = shop_find.shop_name;
							that.imgSrc = shop_find.shop_img;
							that.shop_img = shop_find.shop_img;
							that.shop_tel = shop_find.shop_tel;
							that.shop_tag = shop_find.shop_tag;
							that.shop_addr = shop_find.shop_addr;

							that.business_time = shop_find.business_time;
							that.nav_id = shop_find.nav_id;
							that.shop_lng = shop_find.shop_lng;
							that.shop_lat = shop_find.shop_lat;
							for (var i = 0; i < NavList.length; i++) {
								if (NavList[i]['id'] == shop_find.nav_id) {
									that.cata_name = NavList[i]['name'];
								}

							}




						}

						this.NavList = NavList;
						var name = '';
						for (var i = 0; i < NavList.length; i++) {
							if (i == 0) {
								name += NavList[i]['name']
							} else {
								name += ',' + NavList[i]['name'];
							}

						}
						this.nav_list = name.split(",");


					}
				})
			},
			on_img() {
				this.token = uni.getStorageSync('token');
				if (!this.token) {
					this.is_log();
					return
				}
				var that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						that.imageUrl = tempFilePaths[0];
						that.show = true;
					}
				});

			},
			add_shop() {
				let requestParams = {
					shop_name: this.shop_name,
					shop_img: this.shop_img,
					shop_tel: this.shop_tel,
					shop_tag: this.shop_tag,
					shop_addr: this.shop_addr,
					business_time: this.business_time,
					nav_id: this.nav_id,
					shop_lng: this.shop_lng,
					shop_lat: this.shop_lat
				};
				this.Http.post('/plugin.php/banmitongcheng/api/index/shopAddajax', requestParams).then(ret => {

					uni.showToast({
						title: ret.msg,
						icon: 'none'
					})

					if (ret.status == 200) {
						uni.navigateTo({
							url: '/pages/banmitongcheng/my_shop'
						})

					}
				})
			},



















		}
	}
</script>

<style>
	page {
		background-color: #EFEFF4;
	}




	.shuru {
		height: 250rpx;
		line-height: 50upx;
		width: 750rpx;
		border-width: 2rpx !important;
		border-right-style: solid !important;
		border-left-color: #FFFFFF !important;
		border-right-color: #FFFFFF !important;
		border-bottom-color: #D9D9D9 !important;
		border-top-color: #FFFFFF !important;

	}

	.input-view {
		font-size: 28upx;
	}

	.choose-location {
		padding: 30rpx;


	}


	.info-box {
		padding: 30rpx 0;

	}

	.info-box-item {
		padding-bottom: 20rpx;
	}

	.feedback-title {

		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20upx;
		color: #8f8f94;
		font-size: 28upx;
	}



	.in {
		width: 500rpx;
		height: 50rpx;
	}

	.close-view {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		background-color: #FF5053;
		color: #FFFFFF;
		position: relative;
		top: -110px;
		right: -85px;
		font-size: 20rpx;
	}
</style>